<template>
    <div style="position: relative">
        <x-header  class="cs_title" style="background-color: rgba(0,0,0,0.5)" id="cs_content"  >{{novel_info.name}}</x-header>
        <x-img style="height: 48vw;width: 100%;"  :src="novel_info.banner" ></x-img>
        <div  style="height: 48vw;width: 100%;position: absolute;top: 0;">
        </div>


        <tab>
            <tab-item selected @on-item-click="onItemClick">详情</tab-item>
            <tab-item @on-item-click="onItemClick">选集</tab-item>
        </tab>
        <ul v-if="act_index==1">


            <grid :cols="3" :show-lr-borders="false">
                <grid-item :class="item.pay_money==0?'is_free':'no_free'" v-for="item in chapter_list" :key="item.id" :link="'/read?t_id='+item.id+'&n_id='+nid">
                    <span class="grid-center">{{item.title}}</span>
                </grid-item>
            </grid>
            <!--<li v-for="item in chapter_list" link="/read/9" >-->
                <!--{{item.title}}-->
                <!--<span v-if="item.pay_money">{{item.pay_money}}</span>-->
                <!--<span  v-else="item.pay_money">免费</span>-->
            <!--</li>-->
        </ul>
        <div v-else class="cs_novel_info">
            <p class="cs_name">{{novel_info.name}}</p>
            <p class="cs_desc">{{novel_info.description}}</p>
            <p class="cs_auth">作者：{{novel_info.author}}</p>
            <div class="cs_tags">
                <span class="cs_tag">漫画</span>
                <span class="cs_tag" v-for="tag_index in typeids"  >
                    {{typesconfig[tag_index]}}
                </span>

            </div>
            <flexbox>
                <flexbox-item><div class="flex-demo">人气值：{{parseInt(novel_info.view_count/10000)}}万</div></flexbox-item>
                <flexbox-item><div class="flex-demo">评论数：57</div></flexbox-item>
                <flexbox-item><div class="flex-demo">收藏：{{novel_info.collect_count}}</div></flexbox-item>
            </flexbox>
        </div>

    </div>
</template>

<script>
  import { XImg, Tab, TabItem, Flexbox, FlexboxItem, Grid, GridItem, XHeader} from 'vux'
  const typesconfig = {
    0:"全部",
    37:"都市",
    36:"恋爱",
    35:"校园",
    34:"玄幻",
    33:"热血",
    32:"搞笑",
    31:"古风",
    21:"穿越",
    8:"总裁",
    12:"耽美",
    7:"恐怖",
    6:"悬疑",
    9:"灵异",
    10:"军事",
    38:"真人"
  }
  export default {
    name: 'Chapter',
    components: {
      XImg,
      Tab,
      TabItem,
      Flexbox,
      FlexboxItem,
      Grid,
      GridItem,
      XHeader
    },
    data(){
      return {
        typesconfig:typesconfig,
        white:"#fff",
        typeids:[],
        chapter_list:[],
        hello:'sss',
        novel_info:{},
        act_index:0,
        src: 'https://wwc.alicdn.com/avatar/getAvatar.do?userIdStr=vmN4MC7zMkPHMmQSPk8WOFvLvHQ0v88yP0xSPkcbPG8T&width=160&height=160&type=sns'
      }
    },
    methods:{
      onItemClick:function (e) {
        console.log(e)
        this.act_index = e
      }
    },
    created:function () {
        const nid = this.$route.query.nid
        this.nid = nid
        console.log(this.$route)
        this.$ajax.post('/api/chapter',{
            nid:nid
        }).then(ret=>{
            console.log(ret)
            this.chapter_list = ret.data.data.rows
        })
        this.$ajax.post('/api/novel_info',{
          nid:nid
        }).then(ret=>{
          console.log(ret)
          this.novel_info = ret.data.data
          this.typeids = ret.data.data.type_id.split(',').filter(d=>d)//去除空格假值
        })
    }
  }
</script>

<style scoped lang="stylus">
    .cs_title
        position absolute
        width 100%
        z-index 99
    .cs_novel_name
        position absolute
        bottom 35px
        color #fff
        font-size 20px
        padding-left 15px
    .cs_tags
        padding 15px 0
    .cs_tag
        font-size 10px
        border 1px solid #6FDE79
        color #6FDE79
        margin-right 10px
        border-radius 4px
        padding 0 5px

    .cs_novel_info
        padding 12px
        font-size 14px
        color #999
    .cs_name
        font-size 18px
    .cs_desc
        padding 15px 0
    .grid-center
        text-align center
        font-size 14px
    .is_free
        color #6FDE79
    .no_free
        color coral
</style>
